<template>
	<div class="cardOne" v-if="listInfo.length > 0">
		<el-dialog title="绑定驾驶舱画布" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
			<div>
				<el-select v-model="bindCanvasParams.jsc" filterable clearable placeholder="请选择">
					<el-option
						v-for="item in canvasList"
						:key="item.id"
						:label="item.canvasName"
						:value="item.canvasName + ',' + item.id"
					></el-option>
				</el-select>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="
						dialogVisible = false;
						bindCanvas();
					"
				>
					确 定
				</el-button>
			</span>
		</el-dialog>
		<!-- 列表展示 -->
		<div
			class="cardOne-list"
			v-for="item in listInfo"
			:key="item.id"
			@contextmenu.prevent="openBindCanvas($event, item)"
		>
			<el-image
				draggable
				@dragstart="
					(e) => {
						return dragStart(e, item);
					}
				"
				style="height: 120px"
				:src="$baseUrl + item.iconUrl"
			></el-image>
			<span>{{ item.labelName }}</span>
			<!-- 列表项工具栏 -->
			<div class="cardOne-list__tool" v-if="showTool">
				<!-- 左 -->
				<div class="left" v-if="toolBar.detail">
					<el-popover placement="top" width="240" popper-class="topPopver" trigger="hover">
						<span slot="reference">查看详情</span>
						<template #default>
							<div style="height: 120px">23333</div>
						</template>
					</el-popover>
				</div>
				<!-- 右 -->
				<div class="right">
					<i v-if="toolBar.edit" class="el-icon-edit-outline handle" @click="edit"></i>
					<el-popover placement="top" width="260" popper-class="topPopver" trigger="click">
						<i
							slot="reference"
							v-if="toolBar.delete"
							class="el-icon-delete-solid handle"
							@click="del"
						></i>
						<template #default>
							<div class="delete">
								<div class="delete-content">
									<div class="delete-icon">
										<i class="el-icon-info"></i>
									</div>
									<div class="delete-word">删除后数据不可找回，确认操作吗？</div>
								</div>
								<div class="delete-button">
									<el-button>取 消</el-button>
									<el-button type="primary">确 定</el-button>
								</div>
							</div>
						</template>
					</el-popover>
				</div>
			</div>
		</div>

		<!-- 编辑卡片 -->
		<el-dialog title="修改信息" :visible.sync="showEdit" width="620px" append-to-body>
			<div>
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					label-width="100px"
					class="demo-ruleForm"
				>
					<el-form-item label="场景名称：" prop="name">
						<el-input placeholder="请输入场景名称"></el-input>
					</el-form-item>
					<el-form-item label="场景类型：" prop="name">
						<el-select style="width: 100%" v-model="ruleForm.type" placeholder="未选择"></el-select>
					</el-form-item>
					<el-form-item label="缩略图：" prop="name">
						<el-upload
							accept="image/jpg,image/png"
							class="avatar-uploader"
							action="#"
							:show-file-list="false"
						>
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<div slot="tip" class="el-upload__tip">支持文件格式：jpg、png，建议尺寸400*300像素</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="配置参数" prop="name">
						<el-input placeholder="请输入项目配置参数"></el-input>
					</el-form-item>
					<span style="padding-left: 102px; color: #ccc; font-size: 12px">
						tips: 用于进行UE4编辑器偏好设置
					</span>
				</el-form>
			</div>
			<div slot="footer">
				<el-button size="normal" @click="showEdit = false">取 消</el-button>
				<el-button size="normal" type="primary" @click="showEdit = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { queryCanvasList, formworkBindCanvas } from '@/utils/api';
export default {
	name: 'CardOne',
	props: {
		cardData: {
			type: Array,
			default: () => []
		},
		hasTool: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showTool: false /* 展示工具栏 */,
			showEdit: false /* 编辑当前卡片 */,
			listInfo: [] /* 列表数据 */,
			toolBar: {
				detail: true,
				delete: true,
				edit: true
			} /* 工具栏展示内容 */,
			ruleForm: {},
			rules: {},
			imageUrl: '' /* 图片上传地址 */,
			canvasList: [],
			dialogVisible: false,
			bindCanvasParams: {
				id: '',
				jsc: ''
			}
		};
	},
	watch: {
		cardData(val) {
			this.listInfo = val;
			this.listInfo.map((item) => {
				if (typeof item.formworkName !== 'undefined') {
					this.$set(item, 'labelName', item.canvasName);
					this.$set(item, 'iconUrl', item.canvasIcon);
				} else if (typeof item.sceneName !== 'undefined') {
					this.$set(item, 'labelName', item.sceneName);
					this.$set(item, 'iconUrl', item.sceneIcon);
				}
			});
		},
		hasTool(val) {
			this.showTool = val;
		}
	},
	created() {
		this.init();
		this.getCanvasList();
	},
	methods: {
		//获取画布列表
		async getCanvasList() {
			const res = await queryCanvasList();
			this.canvasList = res.data;
		},
		//打开绑定画布弹窗
		openBindCanvas(e, item) {
			if (item.canvasName) {
				this.dialogVisible = true;
				this.bindCanvasParams.id = item.id;
				this.bindCanvasParams.jsc = item.jscName ? item.jscName + ',' + item.jscId : '';
			}
		},
		//绑定画布
		async bindCanvas() {
			let params = {
				id: this.bindCanvasParams.id,
				jscName: this.bindCanvasParams.jsc.split(',')[0],
				jscId: this.bindCanvasParams.jsc.split(',')[1]
			};

			const res = await formworkBindCanvas(params);

			if (res.status == 200) {
				this.$EventBus.$emit('upLoadMyTemplate');
			}
		},
		// 初始化
		init() {
			this.showTool = this.hasTool;
		},

		// 开始拖拽时传参
		dragStart(e, val) {
			e.dataTransfer.setData('id', '23333');
			$xy.set('jscId', val.jscId, 0);
		},

		// 编辑
		edit() {
			this.showEdit = true;
		},

		// 删除
		del() {}
	}
};
</script>

<style lang="scss">
.topPopver {
	.delete {
		padding: 5px;
	}

	i {
		color: #f60;
	}

	.delete-content {
		display: flex;
		justify-content: space-between;
	}

	.delete-button {
		margin-top: 10px;
		display: flex;
		justify-content: flex-end;
	}
}

.cardOne {
	overflow-y: auto;
	height: 100%;
	font-size: 14px;
	padding: 15px;
	background-color: transparent;
	position: relative;
	@include xy-scroll;

	.cardOne-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15px;
		position: relative;

		.el-image {
			width: 100%;
			border-radius: 5px;
		}

		& > span {
			display: inline-block;
			height: 22px;
			margin-top: 10px;
			color: #ccc;
			padding: 3px 0;
			display: inline-block;
			text-align: center;
			width: 80px;
			font-size: 12px;
			@include xy-overpoint;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.cardOne-list__tool {
			width: 100%;
			position: absolute;
			bottom: 31px;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			color: $--xy-color-light;

			.left {
				background-color: rgba($color: #000000, $alpha: 0.8);
				padding: 4px 5px;
				border-radius: 0 3px 0 5px;

				span {
					cursor: pointer;

					&:hover {
						color: #fff;
					}
				}
			}

			.right {
				background-color: rgba($color: #000000, $alpha: 0.8);
				padding: 4px 8px;
				border-radius: 3px 0 5px 0;

				.handle {
					cursor: pointer;
					font-size: 13px;

					&.el-icon-edit-outline {
						margin-right: 8px;
					}

					&:hover {
						color: #fff;
					}
				}
			}
		}
	}

	.el-popover {
		padding: 8px 10px;
	}
}
</style>
